<template>
    <el-scrollbar
        :class="{ 'is-collapse': settings.collapse, 'side-bar-common': layout === 'common',
        'theme-night':settings.getClass==='night', 'theme-day':settings.getClass==='day'}"
        class="vab-side-bar">
        <!--业务需要的菜单-->
        <def-menu></def-menu>
    </el-scrollbar>
</template>

<script lang="ts">
import Vue from "vue"
import DefMenu from "@/layout/menu";
import {Component, Prop} from 'vue-property-decorator';
import {RouterGetterEnum, SettingsGetterEnum} from '@/store/enum/store.enum'

@Component({components: {DefMenu}})
export default class VabSideBar extends Vue {
    components: { DefMenu };
    @Prop({type: String, default: 'vertical'})
    private layout;
    private activeMenu: string;

    get settings() {
        return {
            collapse: this.$store.getters[SettingsGetterEnum.collapse],
            extra: this.$store.getters[SettingsGetterEnum.extra],
            // 计算属性（设置主题class）
            getClass: this.$store.getters[SettingsGetterEnum.defTheme],
            routes: this.$store.getters[RouterGetterEnum.routes],
        };
    };

    get handleRoutes() {
        return this.layout === 'comprehensive'
            ? this.handlePartialRoutes
            : this.settings.routes.flatMap((route) =>
                route.menuHidden === true && route.children ? route.children : route);
    };

    get handlePartialRoutes() {
        const activeMenu = this.settings.routes.find((item) => item.name === this.settings.extra.first)
        return activeMenu ? activeMenu.children : []
    };
}
</script>

<style lang="scss" scoped>
@mixin active {
    &:hover {
        color: $base-color-white;
        background-color: $base-menu-background-active !important;
    }

    &.is-active {
        color: $base-color-white;
        background-color: $base-menu-background-active !important;
    }
}

.vab-side-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z-index + 1;
    width: $base-left-menu-width;
    height: 100vh;
    overflow: hidden;
    box-shadow: $base-box-shadow;
    transition: $base-transition;

    &.side-bar-common {
        top: $base-top-bar-height;
        height: calc(100vh - #{$base-top-bar-height});
    }

    &.is-collapse {
        width: $base-left-menu-width-min;
        border-right: 0;

        ::v-deep {
            .el-menu--collapse.el-menu {
                > .el-menu-item,
                > .el-submenu {
                    text-align: center;

                    .el-tag {
                        display: none;
                    }
                }
            }

            .el-menu-item,
            .el-submenu {
                text-align: left;
            }

            .el-menu--collapse {
                width: 80px;
                border-right: 0;

                .el-submenu__icon-arrow {
                    right: 10px;
                    margin-top: -3px;
                }
            }
        }
    }

    ::v-deep {
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .el-menu {
            border: 0;
        }

        .el-menu-item,
        .el-submenu__title {
            height: $base-menu-item-height;
            overflow: hidden;
            line-height: $base-menu-item-height;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;

            i {
                color: inherit;
            }
        }

        .el-menu-item {
            @include active;
        }
    }
}
</style>
